<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>postBar</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">
    <link rel="shortcut icon" href="#"/>
</head>
<body>

    <div class="container">
        <div class="col-md-12" style="height: 20px"></div>

        <div class="row" style="font-size: 20px">
            <input class="col-md-7  col-md-offset-2" type="text" id="searchInput" style="font-size: 18px; padding: 7px">
            <button class="col-md-1" style="font-size: 18px; padding: 7px; margin-left: 5px" onclick="searchPostBar()">贴吧搜索</button>
            <a class="col-md-1" style="font-size: 15px" href="createPostBar.html">创建贴吧</a>
        </div>
        <div class="col-md-12" style="height: 20px"></div>

        <div class="row ">

            <div class="col-md-4">
                <!--显示当前用户信息-->
                <div class="col-md-12" style="border: 1px solid black">
                    <br>
                    <div class="col-md-2"><img class="img-circle" src="head.jpeg" style="width: 50px; height: 50px" alt="头像" id="userHead"></div>
                    <div class="col-md-10">
                        <a class="col-md-12" style="font-size: 20px; font-weight: bold ;font-family: 微软雅黑,serif; overflow: hidden;white-space: nowrap;text-overflow:ellipsis;" id="user" target="_blank" href="userData.html">用户昵称</a>
                        <label class="col-md-12" style="font-size: 15px" id="role">普通用户</label>
                    </div>
                    <div class="col-md-12" style="height: 10px"></div>
                </div>

                <div class="col-md-12" style="height: 20px"></div>

                <!--显示系统管理员权限-->
                <div class="col-md-12" style="border: 1px solid black; display: none" id="admin">
                    <br>
                    <label class="col-md-12" style="font-size: 20px; text-align: center; color: mediumorchid">系统管理员权限</label>
                    <div class="col-md-12" style="height: 10px"></div>

                    <div class="col-md-12" style="border-top: 1px solid gray; padding-top: 15px; padding-bottom: 15px" onmouseover=over(this) onmouseout=out(this)>
                        <a class="col-md-12" href="postBarCheck.html"><label style="font-size: 20px; cursor: pointer; color: #333333" id="userData">审核贴吧</label></a>
                    </div>
                </div>
            </div>

            <!--显示贴吧列表-->
            <div class="col-md-8">
                <!--显示贴吧数量-->
                <div class="col-md-10"><label class="row" style="font-size: 16px; color: #666666; display: none" id="postBarNumberTip"></label></div>

                <!--显示普通贴吧-->
                <div class="col-md-12" id="postBarList"></div>

                <div class="col-md-12" style="height: 20px"></div>
                <!--显示翻页器-->
                <div class="row" nowPage="1" maxPage="1" maxDisplay="8" id="pageTurner">
                    <button class="col-md-2 col-md-offset-2" style="border: 1px solid black; height: 40px; text-align: center"  onmouseover=over(this) onmouseout=out(this) onclick="updatePageTurnerRoot(-1, totalNum, getPagePostBar)">上一页</button>
                    <label class="col-md-2 col-md-offset-1" style="font-size: 20px; text-align: center" id="pageLabel">1 / 1</label>
                    <button class="col-md-2 col-md-offset-1" style="border: 1px solid black; height: 40px; text-align: center;"  onmouseover=over(this) onmouseout=out(this) onclick="updatePageTurnerRoot(1, totalNum, getPagePostBar)">下一页</button>
                </div>
            </div>

            <div class="col-md-12" style="height: 40px"></div>

        </div>
    </div>

    <script type="text/javascript">
        let postBarList = $("#postBarList");
        let user;
        var totalNum;

        // 保存搜索字段
        let searchContent;
        // 搜索数量显示
        let postBarNumberTip = $("#postBarNumberTip");

        // 排序方式
        let sortClass = "create_date", sortWay = "desc";
        let timeSort = $("#timeSort");
        let followSort = $("#followSort");

        // 请求得到用户信息
        $.post("/QG_PostBar/user?method=getUserBySession", function (data){
            user = data;
            $("#user").html(user.userName + "（我）");
            if (user.userHead != null) {
                $("#userHead").attr("src", "/QG_PostBar/user_head/" + user.userHead);
            }

            // 是管理员的话显示管理员权限
            if(user.userRole === 1) {
                $("#role").html("系统管理员");
                $("#admin").show();
            }
        }, "json");

        // 请求得到所有贴吧的数量
        $.get("/QG_PostBar/postBar?method=getAllPostBarForNumber", {"check": 0}, function (data) {
            totalNum = data;

            // 更新翻页器
            updatePageTurnerRoot(0, totalNum);
        });

        // 模糊搜索贴吧
        function searchPostBar() {
            // 获取搜索框内容
            searchContent = $("#searchInput").val();

            // 获取有多少的搜索结果
            $.get("/QG_PostBar/postBar?method=getAllSearchForNumber", {"search": searchContent} ,function (data){
                totalNum = parseInt(data);
                updatePageTurnerRoot(0, totalNum);
                if (searchContent !== undefined && searchContent !== "") {
                    postBarNumberTip.show();
                    postBarNumberTip.html("共搜索到 " + totalNum + " 个贴吧");
                } else {
                    postBarNumberTip.hide();
                }
            });


            getPagePostBar();
        }

        // 请求得到贴吧信息
        // 先自己来一次
        getPagePostBar();
        function getPagePostBar() {
            // 获取翻页器
            let pageTurner = $("#pageTurner");

            // 获取当前页数和最大显示数量
            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(pageTurner.attr("nowPage"));
            let maxDisplay = parseInt(pageTurner.attr("maxDisplay"));
            $.post("/QG_PostBar/postBar?method=getAllPostBarByPage", {"check": 0, "search": searchContent, "page": nowPage, "num": maxDisplay}, function (data){
                // 先清空列表
                postBarList.empty();

                // 将数据取出来并显示（将这一部分设置为同步请求，保证各个贴子的顺序）
                $.ajaxSettings.async = false;
                for (const key in data) {
                    // 获取贴吧对象
                    const postBar = data[key];
                    // 获取贴吧的吧主后，将标签添加进来
                    $.get("/QG_PostBar/user?method=getUserById", {"userId": postBar.userId}, function (user){
                        // 获取贴吧名和简介
                        let title = postBar.postBarName;
                        let resume = postBar.postBarResume;
                        // 如果有搜索字段的话，将搜索字段的关键字变红
                        if (searchContent !== undefined) {
                            title = title.replace(eval("/"+ searchContent +"/g"),"<span style='color:red;'>"+ searchContent +"</span>");
                            resume = resume.replace(eval("/"+ searchContent +"/g"),"<span style='color:red;'>"+ searchContent +"</span>");
                        }
                        addItem(postBarList, "/QG_PostBar/postBar?method=getPostBarById&postBarId=" +postBar.postBarId,
                            title, "简介：" + resume, user.userName, postBar.createDate);
                    }, "json");
                }
                $.ajaxSettings.async = true;
            }, "json");
        }

        /**
         * 改变排序方式
         * 如果当前排序方式没有选中，那么选中它
         * 如果已选中，那么更改升降序
         */
        function changeSort(which) {

            if (which === 1) {
                sortClass = "create_date";
                // 如果已经选中，那么倒换升降序
                if (timeSort.attr("select") === "1") {
                    if (timeSort.attr("sortWay") === "desc"){
                        timeSort.attr("sortWay", "asc");
                    } else {
                        timeSort.attr("sortWay", "desc");
                    }
                }
                sortWay = timeSort.attr("sortWay");
                timeSort.css("color", "#FF0000");
                timeSort.html("时间 " + (sortWay === "desc"? "↑" : "↓"));
                followSort.css("color", "#666666");
                timeSort.attr("select", "1");
                followSort.attr("select", "0");
            } else {
                sortClass = "post_bar_follow";
                // 如果已经选中，那么倒换升降序
                if (followSort.attr("select") === "1") {
                    if (followSort.attr("sortWay") === "desc"){
                        followSort.attr("sortWay", "asc");
                    } else {
                        followSort.attr("sortWay", "desc");
                    }
                }
                sortWay = followSort.attr("sortWay");
                followSort.css("color", "#FF0000");
                followSort.html("关注 " + (sortWay === "desc"? "↑" : "↓"));
                timeSort.css("color", "#666666");
                followSort.attr("select", "1");
                timeSort.attr("select", "0");
            }
        }

        /**
         * 负责更新翻页器数据（作用的对象是静态添加的翻页器，而不是动态添加的列表中的翻页器）
         * 获取到翻页器和显示标签、以及要显示的总量
         * 更新最大页数
         * 然后通过翻页标识、当前页数和最大页数判断如何执行翻页操作
         * @param turnPage 翻页标识（-1表示上一页，0表示不翻页，1表示下一页）
         * @param totalNum 目前翻页器对应列表的数据总条数
         * @param updatePage 作为回调函数，即发生翻页后调用来显示新的数据
         */
        function updatePageTurnerRoot(turnPage, totalNum, updatePage) {
            // 获取翻页器和显示标签
            let pageTurner = $("#pageTurner");
            let pageLabel = $("#pageLabel");

            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(pageTurner.attr("nowPage"));
            let maxDisplay = parseInt(pageTurner.attr("maxDisplay"));

            // 计算最大页数
            let newMaxPage;
            if (totalNum === 0) {
                newMaxPage = 1
            } else {
                newMaxPage =  Math.floor((totalNum-1) / maxDisplay) + 1;
            }

            // 判断翻页标识
            let isTurn = false;
            if (nowPage+turnPage > 0 && nowPage+turnPage <= newMaxPage) {
                nowPage += turnPage;
                isTurn = true;
            }

            // 判断更新后的页数变化（可能执行了删除操作，导致当前页数小于最大页数，这时候要将当前页数改为最大页数）
            if (nowPage > newMaxPage) {
                nowPage = newMaxPage;
            }

            // 将新的数据显示出来
            pageLabel.html(nowPage + " / " + newMaxPage);

            // 将新的数据更新到翻页器中
            pageTurner.attr("nowPage", "" + nowPage);
            pageTurner.attr("maxPage", "" + newMaxPage);
            pageTurner.attr("maxDisplay", "" + maxDisplay);

            // 调用翻页函数
            if (updatePage !== undefined && isTurn) {
                updatePage();
            }
        }
    </script>
</body>
</html>